<template>
<div>
 <div class="banner" @click="handleBanner">
   <img class="banner-img" :src="bannerImg" alt="">
   <div class="banner-info">
     <div class="banner-title">
      {{sightName}}
     </div>
     <div class="banner-number">
      <span class="iconfont">&#xe633;aa</span>
     </div>
   </div>
  </div>
<common-gallary :imgs="imgs" v-show="showGallary" @close="handleGallaryClose"></common-gallary>
</div>
</template>
<script>
import commonGallary from "common/gallary/gallary"
export default {
  name:"banner",
  props:{
    sightName:String,
    bannerImg:String,
    imgs:Array
  },
  data(){
    return{
     showGallary:false
    }
  },
  components:{
     commonGallary
  },
  methods:{
    handleBanner(){
        this.showGallary=true
    },
  handleGallaryClose(){
      this.showGallary=false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .banner 
   overflow:hidden
   height:0
   position relative
   padding-bottom:55%
   .banner-img
    width:100%
   .banner-info
    display:flex
    position:absolute
    left:0 
    right:0
    bottom:0
    line-height:.6rem
    background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8));
    .banner-title
     flex:1
     color:#fff
     font-size:.32rem
     padding:0 .2rem
    .banner-number
     margin-top:.04rem
     padding:0 .4rem
     height:0.4rem
     line-height:.4rem
     border-radius:.2rem
     color:#fff
     background:rgba(0,0,0,0.8)
     font-size:.24rem
     .banner-icon
      font-size:.24rem
</style>